.wrap {
	width: 100%;
	height: 100%;
	background: #F2F2F2;
	display: flex;
	flex-direction: column;
	position: relative;
}
.loading-mask {
	width: 100%;
	height: 100%;
	background: rgba(5,5,5,0.3);
	display: none;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	position: absolute;
	top: 0;
}
.loading-mask.show {
	display: flex;
}
.loading-mask .loading {
	width: 2.5rem;
	height: 2.5rem;
	background-color: rgba(0,0,0,0.4);
	color: #000;
	border-radius: 0.1rem;
}
.loading-mask .loading img {
	width: 1rem;
	height: 1rem;
	margin: 0.35rem 0.75rem;
}
.loading-mask .loading p {
	color: #fff;
	text-align: center;
}

/* tab */
.tab-block{
	height: 1rem;
	font-size: .3rem;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #fff;
}
.tab-block .tab-element{
	height: 1rem;
	width: 50%;
	text-align: center;
}
.tab-block .tab-element span{
	line-height: 0.95rem;
	display: inline-block;
	color: #2B2B2B;
}
.tab-block.input>a[data-tab="input"] span,
.tab-block.photo>a[data-tab="photo"] span {
	color: #164DBA;
	border-bottom: .06rem solid #164DBA;
}
.switch-tab {
    display: none;
}
.tab-block.input ~ .switch-tab.input-tab,
.tab-block.photo ~ .switch-tab.photo-tab {
    display: block;
}

/* input */
.form{
	font-size: .3rem;
	border-top: 1px solid #f4f4f4;
	border-bottom: 1px solid #f4f4f4;
	background: #fff;
}
.form .form-element{
	display: flex;
	margin-left: .3rem;
    border-bottom: 1px solid #f4f4f4;
}
.form .form-element:last-child {
    border: none;
}
.form .form-element .label{
	min-width: 1.8rem;
	height: 1rem;
	line-height: 1rem;
	padding-right: .2rem;
}
.form .form-element .input-block{
	flex: 1;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.form .form-element .input-block input {
	border: none;
	background: none;
	display: block;
	line-height: .7rem;
	height: .7rem;
	margin-right: .4rem;
	width: 100%;
    font-size: .3rem;
	/*text-align: right;*/
}
.form .form-element .input-block input:disabled {
	-webkit-text-fill-color:#000;
    -webkit-opacity: 1;
	color: #000;
    opacity: 1;
}
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: #B2B2B2;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color: #B2B2B2;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color: #B2B2B2;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: #B2B2B2;
}
input:disabled::placeholder {
	color: #B2B2B2;
	-webkit-text-fill-color:#B2B2B2;
}
.form .form-element .input-block .mask {
	display: none;
}
.form .form-element .input-block .mask.active {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.6);
}
.form .form-element .input-block .select-block {
	display: block;
	width: 100%;
	height: 5.2rem;
	background-color: #fff;
	position: absolute;
	bottom: 0;
	overflow: scroll;
}
.form .form-element .input-block .select {
	position: absolute;
	height: 1.2rem;
	width: 100%;
    bottom: 2rem;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
}
.form .form-element .input-block .select-block>p {
	text-align: center;
	line-height: 1rem;
	color: rgba(0,0,0,0.4);
	font-size: 0.3rem;
}
.form .form-element .input-block .select-block>p.select {
	line-height: 1.2rem;
	color: rgba(0,0,0,0.6);
	font-size: 0.35rem;
}
.select-nation:after {
	content: "";
	display: block;
	width: 0.27rem;
	height: 0.25rem;
	border-top: 0.03rem solid #B2B2B2;
	border-right: 0.03rem solid #B2B2B2;
	transform: rotate(45deg);
	margin-right: 0.4rem;
	margin-left: -0.2rem;
}

/* photo */
.upload{
	width: 100%;
	height: 4.2rem;
	border-top: 1px solid #f4f4f4;
	border-bottom: 1px solid #f4f4f4;
	background: #fff;
	position: relative;
}
.upload~#before {
	display: block;
}
.upload~#after {
	display: none;
}
.upload.uploaded~#before {
	display: none;
}
.upload.uploaded~#after {
	display: block;
}

.upload-image {
	width: 6.7rem;
	height: 3.4rem;
	display: block;
	position: absolute;
	bottom: 0.4rem;
	left: 0.4rem;
}
.upload-input {
	width: 100%;
	height: 100%;
	display: block;
	opacity: 0;
}
.upload.uploaded .upload-image {
	width: 5.7rem;
	left: 0.9rem;
}
.upload.uploaded:before {
	content: "";
	display: block;
	position: absolute;
	width: 6.7rem;
	height: 3.4rem;
	bottom: 0.4rem;
	left: 0.4rem;
	border: 1px solid #9EA3DA;
	background: rgba(0,0,0,0);
}
.upload.uploaded:after {
	content: '点击修改身份证人面像';
	display: block;
	position: absolute;
	height: .7rem;
	line-height: 0.7rem;
	bottom: 0.4rem;
	width: 6.71rem;
	left: 0.4rem;
	text-align: center;
	background-color: #9EA3DA;
	color: #fff;
	opacity: 0.8;
}
.remind{
	border-top: 1px solid #f4f4f4;
	border-bottom: 1px solid #f4f4f4;
	margin-top: .2rem;
	background: #fff;
}
.remind .title {
	margin-left: .3rem;
	height: .8rem;
	line-height: .8rem;
	border-bottom: 1px solid #f4f4f4;
	font-size: .24rem;
	color: #222;
}
.remind .line {
	margin-left: .3rem;
	font-size: .24rem;
	line-height: .8rem;
	height: .8rem;
}
.remind .title-line {
	margin-left: .3rem;
	line-height: .7rem;
	font-size: .24rem;
	border-bottom: 1px solid #f4f4f4;
	color: #f9a119;
}
.remind .result-line {
	margin-left: .3rem;
	color: #999;
	font-size: .24rem;
	line-height: .7rem;
	border-bottom: 1px solid #f4f4f4;
	position: relative;
}
.remind .result-line input {
	position: absolute;
	color: #000;
	right: .3rem;
	border: none;
	background: none;
	line-height: .7rem;
	height: .7rem;
	margin-right: .4rem;
    font-size: .3rem;
	text-align: right;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	min-width: 5rem;
}

/* link */
.next-btn {
	display: block;
	border: none;
	width: 6.7rem;
	height: .94rem;
	line-height: .94rem;
	text-align: center;
	color: #fff;
	background: #3C45BF;
	font-size: .36rem;
	margin: .4rem auto 0.15rem;
	border-radius: 0.1rem;
}
.next-btn[disabled] {
	background: #8C92D4;
}
.quick-bind {
    font-size: 0.3rem;
    color: #164DBA;
    text-align: center;
	margin-top: 0.25rem;
	padding-bottom: 1.5rem;
}
.quick-bind>.icon {
	display: inline-block;
	width: 0.34rem;
	height: 0.34rem;
	border-radius: 50%;
	border: 0.01rem solid #164DBA;
	margin-left: 0.1rem;
	vertical-align: middle;
	position: relative;
    top: -0.04rem;
}
.quick-bind>.icon:after {
	content: "";
	display: block;
	width: 0.13rem;
	height: 0.13rem;
	border-top: 0.01rem solid #164DBA;
	border-right: 0.01rem solid #164DBA;
	transform: rotate(45deg);
	position: relative;
	top: 0.09rem;
    left: 0.06rem;
}

/* step two */
.step-two {
	padding-top: .2rem;
}
.form .form-element .valid-btn{
	display: block;
	width: 1.8rem;
	height: 1rem;
	line-height: 1rem;
	border-left: 1px solid #f4f4f4;
	text-align: center;
	color: #5059D0;
}
.tips{
	font-size: .26rem;
	color: #888888;
	width: 7rem;
	margin: .2rem auto;
}
.mask{
	width: 100%;
	height: 100%;
	background: rgba(5,5,5,0.3);
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
}
.mask.show{
	display: flex
}
.mask .alert{
	width: 6rem;
	height: 3.5rem;
	background: #fff;
	border-radius: 5px;
	display: flex;
	flex-direction: column;
}
.mask .alert .text p{
	padding: .8rem 1rem;
	text-align: center;
	color: #999;
}
.mask .alert  .operation{
	height: .8rem;
	border-top: 1px solid #f4f4f4;
	display: flex;
}
.mask .alert .confirm-btn{
	display: block;
	flex: 1;
	font-size: .36rem;
	color: #222;
	text-align: center;
	line-height: .8rem;
}